<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基金诊断</title>
  <link rel="stylesheet" href="./assets/common.css">
  <style>
    canvas {
      width: 100%;
      height: 264px;
    }

    .chart-wrapper {
      position: relative;
    }

    .chart-card {
      width: 100%;
      padding: 0;
      margin: 12px 0;
      background: #fff;
    }

    .chart-card-title {
      width: 100%;
      height: 45px;
      box-shadow: 0 1px 0 0 #E8E8E8;
      padding: 0 16px;
      color: rgba(0, 0, 0, .85);
      font-size: 16px;
      /* font-weight: bold; */
      line-height: 45px;
      vertical-align: middle;
    }

    .chart-tooltip {
      position: absolute;
      z-index: 99;
      background-color: rgba(233, 241, 255, 0.8);
      border: 1px solid #1890ff;
      padding: 5px 9px;
      border-radius: 2px;
      text-align: center;
      font-size: 12px;
      color: #2e2e2e;
      text-align: left;
      top: 0;
      left: 0;
      visibility: hidden;
      max-width: 200px;
    }
    .chart-tooltip:after, .chart-tooltip:before {
      border: solid transparent;
      content: ' ';
      height: 0;
      position: absolute;
      width: 0;
      top: 100%;
    }
    .chart-tooltip:before {
      border-width: 7px;
      border-top-color: #1890ff;
      left: 50%;
      margin-left: -7px;
      margin-top: 1px;
    }
    .chart-tooltip:after {
      border-width: 7px;
      border-top-color: #ECF3FE;
      left: 50%;
      margin-left: -7px;
    }

    .chart-tooltip span {
      display: block;
    }
    .chart-tooltip span:nth-child(1) {
      font-weight: bold;
    }
  </style>
</head>
<body>
<div class="chart-card">
  <div class="chart-card-title">
    基金诊断 <img src="https://gw.alipayobjects.com/zos/rmsportal/TDVdSYoxhzcmVyxyhhwm.png" style="display: inline-block;width: 12px;height: 12px;">
  </div>
  <!-- Content here -->
  <div class="chart-wrapper">
    <!-- 图表主题 -->
    <canvas id="mountNode"></canvas>
    <!-- 自定义 tooltip -->
    <div class="chart-tooltip">
      <span></span>
      <span></span>
    </div>
  </div>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
const data = [
  { name: '超大盘能力', value: 6.5, illustrate: '超大盘能力值越高表示相对于参考指数表现越好' },
  { name: '抗跌能力', value: 9.5, illustrate: '股市下跌，净值下跌幅度越小，分值越高' },
  { name: '稳定能力', value: 9, illustrate: '分支越高稳定性越强' },
  { name: '绝对收益能力', value: 6, illustrate: '分值越高绝对收益能力越强' },
  { name: '选证择时能力', value: 6, illustrate: '分值越高选证择时能力越强' },
  { name: '风险回报能力', value: 8, illustrate: '分值越高风险回报能力越强' }
];

const chart = new F2.Chart({
  id: 'mountNode',
  pixelRatio: window.devicePixelRatio
});
chart.source(data, {
  value: {
    min: 0,
    max: 10,
    tickCount: 4
  }
});
chart.coord('polar');
chart.axis('value', {
  label: null,
  grid(text, index) {
    if (index === 3) {
      return {
        lineDash: null
      };
    }
  }
});
chart.tooltip({
  custom: true,
  onChange(e) {
    const item = e.items[0];
    const origin = item.origin;
    const tooltipEl = $('.chart-tooltip');
    tooltipEl.html(
      '<span>' + origin.name + ': ' + origin.value + '</span>' +
      '<span>' + origin.illustrate + '</span>'
    );

    // 设置 tooltip 位置
    const canvasOffsetTop = $('#mountNode').position().top;
    const canvasOffsetLeft = $('#mountNode').position().left;
    const tooltipWidth = tooltipEl.outerWidth();
    const tooltipHeight = tooltipEl.outerHeight();

    tooltipEl.css({
      visibility: 'visible',
      left: canvasOffsetLeft + item.x - tooltipWidth / 2,
      top: canvasOffsetTop + item.y - tooltipHeight - 15
    });
  },
  onHide() {
    const tooltipEl = $('.chart-tooltip');
    tooltipEl.css({
      visibility: 'hidden'
    });
  }
});
chart.area().position('name*value').style({
  fillOpacity: 0.6
}).animate({
  appear: {
    animation: 'groupWaveIn'
  }
});
chart.line().position('name*value').animate({
  appear: {
    animation: 'groupWaveIn'
  }
});
chart.point().position('name*value').style({
  lineWidth: 1,
  stroke: '#fff'
}).animate({
  appear: {
    delay: 300
  }
});

chart.guide().html({
  position: ['50%', '50%'],
  html: '<div style="color: #fff;white-space: nowrap;text-align:center;">'
    + '<p style="font-size: 16px;margin:0;">诊断分</p>'
    + '<p style="font-size: 36px;margin:0;font-weight: bold;">73</p>'
    + '</div>'
});
chart.render();
</script>
</body>
</html>
